<template>
    <view>
        <!-- 列表平铺两列三列 -->
        <view class="" v-if="coreshopData.parameters.column == '2' && coreshopData.parameters.display == 'list' || coreshopData.parameters.column == '3' && coreshopData.parameters.display == 'list'">
            <view class="coreshop-padding-top-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-margin-top-10  coreshop-margin-left-10  coreshop-margin-right-10 coreshop-bg-white coreshop-border-radius-trbl-18">
                <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
                    <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
                    <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
                </view>
                <view class="coreshop-divider">
                    <view class="complete"></view>
                </view>
            </view>
            <view class="waterfall">
                <uv-waterfall ref="waterfall"
                              v-model="coreshopData.parameters.list"
                              :columnCount="coreshopData.parameters.column"
                              :add-time="10"
                              :left-gap="leftGap"
                              :right-gap="rightGap"
                              :column-gap="columnGap"
                              @changeList="changeList">
                    <!-- 第一列数据 -->
                    <template v-slot:list1>
                        <!-- 为了磨平部分平台的BUG，必须套一层view -->
                        <view>
                            <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                                <view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
                                    <view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
                                        <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                    </view>
                                    <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
                                        <view class="coreshop-multiple-line-clamp">
                                            <text class="coreshop-font-14">{{item.name}}</text>
                                        </view>
                                        <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
                                            <view class="coreshop-text-red coreshop-font-weight-bold">
                                                <text class="coreshop-font-12">¥</text>
                                                <text class="coreshop-font-16">{{item.price}}</text>
                                                <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
                                            </view>
                                            <view>
                                                <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                            </view>
                                        </view>
                                        <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view class="complete"></view>
                                        </view>
                                        <view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view>
                                                {{ pointShowName}}兑换价:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
                                            </view>
                                        </view>
                                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                            <view>
                                                购买赠送:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{item.points}}{{ pointShowName}}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <!-- 第二列数据 -->
                    <template v-slot:list2 v-if="coreshopData.parameters.column>=2">
                        <!-- 为了磨平部分平台的BUG，必须套一层view -->
                        <view>
                            <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                                <view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
                                    <view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
                                        <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                    </view>
                                    <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
                                        <view class="coreshop-multiple-line-clamp">
                                            <text class="coreshop-font-14">{{item.name}}</text>
                                        </view>
                                        <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
                                            <view class="coreshop-text-red coreshop-font-weight-bold">
                                                <text class="coreshop-font-12">¥</text>
                                                <text class="coreshop-font-16">{{item.price}}</text>
                                                <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
                                            </view>
                                            <view>
                                                <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                            </view>
                                        </view>
                                        <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view class="complete"></view>
                                        </view>
                                        <view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view>
                                                {{ pointShowName}}兑换价:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
                                            </view>
                                        </view>
                                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                            <view>
                                                购买赠送:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{item.points}}{{ pointShowName}}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <!-- 第三列数据 -->
                    <template v-slot:list3 v-if="coreshopData.parameters.column>=3">
                        <!-- 为了磨平部分平台的BUG，必须套一层view -->
                        <view>
                            <view v-for="(item, index) in list3" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
                                <view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
                                    <view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
                                        <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
                                    </view>
                                    <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
                                        <view class="coreshop-multiple-line-clamp">
                                            <text class="coreshop-font-14">{{item.name}}</text>
                                        </view>
                                        <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
                                            <view class="coreshop-text-red coreshop-font-weight-bold">
                                                <text class="coreshop-font-12">¥</text>
                                                <text class="coreshop-font-16">{{item.price}}</text>
                                                <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
                                            </view>
                                            <view>
                                                <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                                            </view>
                                        </view>
                                        <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view class="complete"></view>
                                        </view>
                                        <view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                            <view>
                                                {{ pointShowName}}兑换价:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
                                            </view>
                                        </view>
                                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                            <view>
                                                购买赠送:
                                            </view>
                                            <view class="coreshop-text-red">
                                                {{item.points}}{{ pointShowName}}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                </uv-waterfall>
            </view>
        </view>

        <!-- 列表平铺单列 -->
        <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.column == '1' && coreshopData.parameters.display == 'list'">
            <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookMore == 'true'">
                <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
                <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
            </view>
            <view class="coreshop-divider">
                <view class="complete"></view>
            </view>
            <view class="coreshop-text-black" v-for="(item, index) in coreshopData.parameters.list" :key="index" v-if="count" @tap="goGoodsDetail(item.id)">
                <view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10">
                    <view>
                        <u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
                    </view>
                    <view class="coreshop-flex coreshop-flex-direction  coreshop-padding-left-10  coreshop-percent-100">
                        <view class="coreshop-font-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
                        <view class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">{{ item.brief }}</view>
                        <view class="coreshop-flex coreshop-align-center coreshop-padding-top-10  coreshop-padding-bottom-10">
                            <view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">已售{{item.buyCount+item.initialSales}}{{item.unit}}</view>
                            <view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.viewCount}}人访问</view>
                        </view>
                        <view class="coreshop-flex coreshop-justify-between  coreshop-flex-direction-row coreshop-align-center">
                            <view class="coreshop-flex coreshop-align-center">
                                <view class="coreshop-font-14 coreshop-text-red">￥{{ item.price  }}</view>
                                <view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
                            </view>
                            <view class="coreshop-buy-btn">马上抢</view>
                        </view>
                    </view>
                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                        <view>
                            {{ pointShowName}}兑换价:
                        </view>
                        <view class="coreshop-text-red">
                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                        </view>
                    </view>
                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                        <view>
                            购买赠送:
                        </view>
                        <view class="coreshop-text-red">
                            {{item.points}}{{ pointShowName}}
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-none" v-else>
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
            </view>
        </view>

        <!-- 横向滚动 -->
        <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.display == 'slide'">
            <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
                <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
                <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
            </view>
            <view class="coreshop-divider">
                <view class="complete"></view>
            </view>
            <view v-if="count">
                <swiper :class="coreshopData.parameters.column==3?'swiper3':coreshopData.parameters.column==2?'swiper2':''" @change="change">
                    <swiper-item v-for="(no, indexPage) of pageCount" :key="indexPage">
                        <u-grid :col="coreshopData.parameters.column" :border="false" align="left" :data-id="no">
                            <u-grid-item v-for="(item, index)  in coreshopData.parameters.list" v-if="index >=coreshopData.parameters.column*no && index <coreshopData.parameters.column*(no+1)" :key="index" @click="goGoodsDetail(item.id)">
                                <view class="good_box">
                                    <u-image :src="item.image" :index="item.id" mode="widthFit" width="100%" :height="coreshopData.parameters.column==3?'104px':coreshopData.parameters.column==2?'164px':'104px'" radius="10">
                                    </u-image>
                                    <view class="good_title u-line-2">
                                        {{item.name}}
                                    </view>
                                    <view class="good-price coreshop-display-block">
                                        {{item.price}}元 <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
                                    </view>
                                    <view class="good-tag-recommend" v-if="item.isRecommend">
                                        推荐
                                    </view>
                                    <view class="good-tag-hot" v-if="item.isHot">
                                        热门
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                                        <view>
                                            {{ pointShowName}}兑换价:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                                        </view>
                                    </view>
                                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                                        <view>
                                            购买赠送:
                                        </view>
                                        <view class="coreshop-text-red">
                                            {{item.points}}{{ pointShowName}}
                                        </view>
                                    </view>
                                </view>
                            </u-grid-item>
                        </u-grid>
                    </swiper-item>
                </swiper>
                <view class="indicator-dots">
                    <view class="indicator-dots-item" v-for="(no, index)  of pageCount" :key="index" :class="[current == no ? 'indicator-dots-active' : '']">
                    </view>
                </view>
            </view>
            <view v-else="">
                <scroll-view class='swiper-list' scroll-x="true"></scroll-view>
            </view>

        </view>



    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,
                pageCount: [],
                count: false,
                list1: [],// 瀑布流第一列数据
                list2: [],// 瀑布流第二列数据
                list3: [],// 瀑布流第三列数据
                leftGap: 10,
                rightGap: 10,
                columnGap: 10
            };
        },
        name: "coreshopGoods",
        props: {
            coreshopData: {
                // type: Array,
                required: true,
            }
        },
        computed: {
            imageStyle(item, column) {
                return item => {
                    const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
                    const w = v / column;
                    const rate = w / item.w;
                    const h = rate * item.h;
                    return {
                        width: w + 'px',
                        height: h + 'px'
                    }
                }
            },
            pointSwitch() { return this.$store.state.config.pointSwitch },
            pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
            pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
            pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
            pointShowName() { return this.$store.state.config.pointShowName },
            pointGetModel() { return this.$store.state.config.pointGetModel },
            pointShowPoint() { return this.$store.state.config.pointShowPoint },
        },
        methods: {
            // 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
            changeList(e) {
                this[e.name].push(e.value);
            },
            change(e) {
                this.current = e.detail.current;
            }
        },
        created() {
            this.count = this.coreshopData.parameters.list.length > 0;
            var page = Number(this.coreshopData.parameters.list.length / this.coreshopData.parameters.column).toFixed(0);
            if (this.coreshopData.parameters.column * page < this.coreshopData.parameters.list.length) {
                page = Number(page) + 1;
            }
            for (var i = 0; i < page; i++) {
                this.pageCount.push(i);
            }
        }
    }
</script>

<style scoped lang="scss">
    .good_box { border-radius: 8px; background-color: #ffffff; padding: 5px; position: relative; width: 100%;
        .good_title { font-size: 14px; margin-top: 5px; color: $u-main-color; }
        .good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 7.5px; left: 7.5px; background-color: $u-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 2px 7px; border-radius: 25px; font-size: 10px; line-height: 1; }
        .good-tag-recommend { display: flex; margin-top: 5px; position: absolute; top: 7.5px; right: 7.5px; background-color: $u-type-primary; color: #FFFFFF; margin-left: 10px; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
        .good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 7.5px; left: 7.5px; background-color: $u-type-primary; color: #FFFFFF; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
        .good-price { font-size: 15px; color: $u-type-error; margin-top: 5px; }
    }

    .indicator-dots { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; flex-direction: row;
        .indicator-dots-item { background-color: $u-tips-color; height: 6px; width: 6px; border-radius: 10px; margin: 0 3px; }
        .indicator-dots-active { background-color: $u-type-primary; }
    }
    .swiper3 { height: 200px; }
    .swiper2 { height: 270px; }
    .image2 { height: 150px; }
    .image3 { height: 150px; }
</style>
